<template>
  <div class="div" @mousemove="mousemove" @mousedown="mousedown" @mouseup="mouseup">
    <svg width="600" height="400">
      <g class="g-box" stroke="#000" stroke-width="1" stroke-linecap="round" :transform="`translate(${tx}, 60)`">
        <path d="M30,30L500,30"></path>
        <template v-for="i in 500">
          <path v-if="i%30==0" :d="`M${i},30L${i},20`"></path>
          <path v-else-if="i%5==0&& i>=30" :d="`M${i},30L${i},25`"></path>
          <text font-family="sans-serif" v-if="i%30==0" :x="i-5" y="15" font-size="12">{{ i * 5 }}</text>
        </template>

      </g>
    </svg>
  </div>
</template>
<style>
svg{border: 1px solid #000;}
.div {
  /*overflow: hidden;*/
  /*width: 300px;*/
//border: 1px solid #000; user-select: none;
}
</style>
<script setup>
import {ref} from "vue";


// onMounted(() => {
//   let svg = d3.select("svg");
//   // 用于坐标轴的线性比例尺
//   var xScale = d3.scaleLinear()
//       .domain([0, 10]) // 定义显示在比例尺上面的刻度
//       .range([0, 300]); // 定义比例尺实际的显示宽度（像素）
//
//   // 定义坐标轴
//   var axis = d3.axisBottom(xScale);
//
//   // 在svg中添加一个包含坐标轴各元素的g元素
//   var gAxis = svg.append("g")
//       .attr("transform", "translate(180,180)"); // 坐标原点平移到（80, 80）的位置
//
//   // 绘制坐标轴
//   gAxis.call(axis);
// })

let isDown = ref(false);
let tx = ref(30);
let tx1 = ref(0);
let initVal = ref(0);
let mousedown = (e) => {
  isDown.value = true;
  tx1.value = tx.value;
  initVal.value = e.offsetX;
}
let mousemove = (e) => {
  if (isDown.value) {
    tx.value = e.offsetX - initVal.value + tx1.value
    console.log(e)
  }
}
let mouseup = (e) => {
  isDown.value = false;
}


</script>